<template>
  <div class="home">
    <h2>Home Page</h2>
    <h2>home page计数</h2>
    <!--1. 调用state时,是需要state.模块名.xxx  来获取数据-->
    <h2>Countter模块的counte: {{ $store.state.subCounter.count }}</h2>
    <!-- <h2>Countter模块的douberCounte: {{ $store.state.getters.doubleCounter }}</h2> --><!--getters 是独立于 state 的，访问路径应为 $store.getters.xxx，而不是 $store.state.getters.xxx-->
     <!--2. 使用getters时,是直接getters.xxx  来获取,不用写模块名-->
    <h2>Countter模块的douberCounte: {{ $store.getters.subDoubleCounter }}</h2>
    <button @click="increamentCount">count模块+1</button>
    <ul>
      <!--获取数据: 需要从模块中获取state.moduleName里面获取-->
      <template v-for="item in $store.state.home.banners" :key="item.acm">
        <li>{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>

<script setup>
  import { useStore,mapState, mapGetters, mapMutations, mapActions } from 'vuex'
  import { toRefs } from 'vue'
  import { computed } from "vue";
  import useState from "../hooks/useState.js";
  import { CHANGE_INFO } from '../store/mutation_type.js'

  const store = useStore()

  // 告诉vuex发起网络请求
  // 派发事件时,不需要从模块中获取,因为dispatch是全局的,mutation也是如此
  store.dispatch('fetchHomeMultiDataAction') // 这里不需要从模块里面获取,因为dispatch是全局的
  .then(res=>{
    console.log("Home中的then被回调了:  ",res)  
  }
  ).catch(err=>{
    console.log("请求失败:  ",err)
  })

  function increamentCount() {
    store.dispatch('increramentCountAction')
  }

</script>

<style scoped>
</style> 

